<!-- WangEditor -->
<template>
  <div style="width: 100%;" class="mb-4">
    <label class="" >{{label}}</label>
    <div id="wangEditorWrap" :style="wrapStyle">
      <v-btn icon  id="fullsrceenbtn"  @click="fullscreenFunc">
        <v-icon color="grey">{{wrapStyle ? 'fullscreen_exit' : 'fullscreen'}}</v-icon>
      </v-btn>
      <div ref="editor" :style="editorStyle" id="editor"></div>
    </div>
  </div>
</template>
<script>
import E from 'wangeditor'
import { SingleImageUploadApi } from '@/api/attachment'
export default {
  name: 'RichText',
  props: {
    value: {
      type: String,
      default: null
    },
    label: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data: function () {
    return {
      // editorContent: this.value || '',
      wrapStyle: null,
      editorStyle: 'text-align:left;height:' + this.height + ';',
      editor: null
    }
  },
  computed: {
    editorStyleDefault: function() {
      return 'text-align:left;height:' + this.height + ';'
    }
  },
  watch: {
    value: function(newValue, oldValue) {
      if (newValue !== '' && oldValue === '') {
        this.editor.txt.html(newValue)
      }
    }
  },
  mounted: function () {
    var editor = new E(this.$refs.editor)
    this.editor = editor
    editor.customConfig.zIndex = 4
    editor.customConfig.pasteFilterStyle = false
    // 使用 base64 保存图片
    // editor.customConfig.uploadImgShowBase64 = true
    // 配置服务器端地址
    // editor.customConfig.uploadImgServer = 'https://api.xsysq.cn/index/attachment/singel'
    editor.customConfig.uploadImgServer = SingleImageUploadApi
    editor.customConfig.uploadImgTimeout = 5000
    editor.customConfig.uploadFileName = 'file'
    editor.customConfig.uploadImgHeaders = {
      'Authorization': 'Bearer ' + this.$store.getters.token
    }
    editor.customConfig.uploadImgHooks = {
      customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.url
        insertImg(url)
        // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }
    editor.customConfig.onchange = (html) => {
      this.$emit('input', html)
    }
    editor.create()
    editor.txt.html(this.value)
    var node = document.getElementById('fullsrceenbtn')
    editor.$toolbarElem[0].appendChild(node)
  },
  methods: {
    fullscreenFunc: function () {
      this.wrapStyle = this.wrapStyle ? null : 'display:block;position: fixed;z-index: 10000;top: 0px;left: 0px;right: 0px;height: 100%;padding: 0px;'
      this.editorStyle = this.editorStyle === this.editorStyleDefault ? 'text-align:left;height:107%;' : this.editorStyleDefault
    }
  }
}
</script>
<style>
#wangEditorWrap {
  width: 100%;
}
.w-e-menu{
  z-index: 2 !important;
}
.w-e-toolbar{
  z-index: 1;
}
.w-e-text-container {
  height:90% !important;
  z-index: 1 !important;
}
.w-e-text {
  height:100% !important;
  background-color: white;
}
</style>
